<!-- Start login -->
<section id="login">
    <div class="page-head">
        <div class="container">
            <div class="row">
                <div class="span9 head-text">
                    <h3><i class="icon-money"></i>Payment</h3>                    
                </div>
                <div class="span3">
                    <i class="icon icon-money"></i>
                </div>
            </div>
        </div>			
    </div>
    <div class="container">
        <div class="page-section">
            <div class="row">
                <div class="span12">
                    <?php echo $this->element('message'); ?>
                </div>
                <?php if (isset($au_settings)): ?>
                    <div class="span4 payment-sumary">
                        <div class="payment-sumary-content">	
                            <div class="media-body">
                                <h6 class="media-heading">Payment summary</h6>
                                <div class="clearfix"></div>
                                <p>

                                </p>
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Descriptions</th>
                                            <th style="text-align: right !important;">Amount</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>sadsa</td>
                                            <td style="text-align: right !important;">$10</td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="2" style="text-align: right !important;"><strong>Total: $10</strong></td>
                                        </tr>                                    
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="span8" >                    
                        <form class="form-horizontal pm_frm" action="" method="post" enctype="multipart/form-data" id="form">
                            <div class="control-group">
                                <label class="control-label" for="name_on_card">Name On Card</label>
                                <div class="controls">                                
                                    <input id="name_on_card" type="text" name="name_on_card"  autofocus="autofocus" placeholder="Name On Card" value="" required="required" />
                                </div>
                            </div>                        
                            <div class="control-group">
                                <label class="control-label" for="cc_number">Credit Card Number</label>
                                <div class="controls">                                
                                    <input type="text" id="cc_number" name="cc_number" placeholder="Credit Card Number" value="" required="required" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="ccv">CCV</label>
                                <div class="controls">                                
                                    <input type="text" id="ccv" name="ccv" placeholder="CCV" value="" required="required"/>
                                </div>
                            </div>

                            <div class="control-group">
                                <label class="control-label" for="ed_month">Expiration Date</label>
                                <div class="controls"> 
                                    <select name="ed_month" id="" class="span1">
                                        <?php
                                        for ($m = 1; $m <= 12; $m++) {
                                            echo "<option value='{$m}'>{$m}</option>";
                                        }
                                        ?>
                                    </select>
                                    <select name="ed_year" id="" class="span2">
                                        <?php
                                        for ($y = date("Y"); $y <= (date("Y") + 10); $y++) {
                                            echo "<option value='{$y}'>{$y}</option>";
                                        }
                                        ?>
                                    </select>
                                </div>
                            </div>                        

                            <div class="control-group">
                                <div class="controls">                                
                                    <button type="submit" class="btn">Submit</button>
                                </div>
                            </div>
                        </form>

                    </div>                
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>
<!-- End about -->

<script>
// Form validation code will come here.
    $(document).ready(function (e) {

        $("#form").validate({
            rules: {
                name_on_card: "required",
                ccv: {
                    required: true,
                    number: true
                },
                cc_number: {
                    required: true,
                    creditcard: true
                }
            },
            messages: {
                name_on_card: "Please enter your name on card",
                ccv: {
                    required: "Please enter ccv",
                },
                cc_number: {
                    required: "Please provide a credit card number"
                }
            }
        });

    });

</script>
